<template>
    <div>
        <div>
            <p>分类：<input type="text" v-model="namef"></p>
            <p><input type="button" @click="fen_cer()" value="添加"></p>
        </div>
            <div class="edit_container">
        <p>用户名：<input type="text" v-model="name"></p>
        <p>商品价格：<input type="text" v-model="price"></p>
        <p><input type="file" @change="tianjia($event)"></p>
        <select v-model="ssa">
            <option v-for="(i,j) in fenlist" :key="j" :value="i.id">{{i.name}}</option>
        </select>
    <quill-editor
        v-model="detll"
        ref="myQuillEditor"
        :options="editorOption"
        @focus="onEditorFocus($event)" @blur="onEditorBlur($event)"
        @change="onEditorChange($event)">
    </quill-editor>
        <p><button @click="post_info()">提交</button></p>
            </div>
        <div>
            <table>
                <tr><td>用户：</td><td>价格</td><td>图片</td><td>简介</td></tr>
                <tr v-for="(x,y) in goodslist" :key="y">
                    <td>{{x.name}}</td>
                    <td>{{x.price}}</td>
                    <td>{{x.img}}</td>
                    <td v-html="x.detll">{{x.detll}}</td>
                </tr>
            </table>
                <button @click="yema1()">首页</button>
                <button @click="yema2()">上一页</button>
                <button v-for="(p,index) in fylist" :key="index" @click="yema3(p)">{{p}}</button>
                <button @click="yema4()">下一页</button>
                <button @click="yema5()">尾页</button>
        </div> 
    </div>
</template>

<script>
import axios from 'axios'
import {CES_fuwenben_show,CES_fenlei_cerate,CES_fenlei_show} from '../axios_send/api.js'
import { quillEditor } from 'vue-quill-editor' // 调用富文本编辑器
import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式  三种样式三选一引入即可
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.bubble.css'
// import * as Quill from 'quill'; // 富文本基于quill
export default {
    name:"fwbgoos",
    components:{
        quillEditor
    },
    data(){
        return{
            ssa:"",
            namef:"",
            name:"",
            price:"",
            str:"",
            detll:'<p></p><p><br></p><ol></ol>',
            editorOption:{},
            fenlist:"",
            goodslist:[],
            fylist:[],
            page_info:"",
            p:1,

        }
    },
    methods:{
        // 准备富文本编辑器
        onEditorReady (editor) {},
        // 富文本编辑器 失去焦点事件
        onEditorBlur (editor) {},
        // 富文本编辑器 获得焦点事件
        onEditorFocus (editor) {},
        // 富文本编辑器 内容改变事件
        onEditorChange (editor) {},
        post_info(){
            var form_data = new FormData()
            form_data.append("name",this.name)
            form_data.append("price",this.price)
            form_data.append("img",this.file)
            form_data.append("fenlei",this.ssa)
            form_data.append("detll",this.detll)
            console.log(form_data);
            
            axios({
                url:"http://127.0.0.1:8000/ces/goodss/",
                method:"post",
                data:form_data
            })
            .then(res=>{
                console.log(res)
            })
        },
        sss(){
            var data ={"page":this.p}
        CES_fuwenben_show(data)
        .then(res=>{
                if(res.code==200){
                    console.log(res)
                    this.page_info=res.page_info
                    this.goodslist = res.data
                    this.fylist = res.goods_list
                    // this.str = res.data["detll"]
                    console.log(1111,res.data);
                    
                }
                
            })
        },
        yema1(){
            this.p = 1
            this.sss()
        },
        yema2(){
            if(this.p>1){
                this.p -= 1
                this.sss()
            }else{
                this.p = 1
                this.sss()
            }
        },
        yema3(){
            this.p = p 
            this.sss()
        },
        yema4(){
            if(this.p>=this.page_info){
                this.p += this.page_info
                this.sss()
            }else{
                this.p = this.page_info
                this.sss()
            }
        },
        yema5(){
            if(this.p = this.page_info){
                 this.sss()
            }
        },
        fen_cer(){
            var data={"name":this.namef}
            CES_fenlei_cerate(data)
            .then(res=>{
                console.log(res)
            })
        },
        fenleishou(){
            CES_fenlei_show()
            .then(res=>{
                console.log(res);
                this.fenlist = res.data
            })
        },
        tianjia(event){
            this.file = event.target.files[0]
        }
    },
    created(){
        this.sss()
        this.fenleishou()
    },
    computed:{
        editor() {
            return this.$refs.myQuillEditor.quill;
        }
    }
}
</script>

<style>

</style>